<template>
  <div
    v-for="(item, i) in list"
    :ref="
      (el) => {
        if (el) {
          divRefs[i] = el;
        }
      }
    "
    :key="i"
  >
    {{ item }}
  </div>
  <button @click="updateList">改变数组的值</button>
</template>

<script>
import { ref, onMounted, reactive, onBeforeUpdate } from "vue";
export default {
  setup() {
    const list = reactive([1, 2, 3]);
    const divRefs = ref([]);
    onBeforeUpdate(() => {
      divRefs.value = [];
    });

    onMounted(() => {
      console.log("divRefs", divRefs.value);
    });
    return {
      list,
      divRefs,
    };
  },
  methods: {
    updateList() {
      this.list.push(Math.random() * 10);
      this.list.shift();
    },
  },
};
</script>

<style>
</style>